<script setup>
	const props = defineProps({
		topInfos: {
			type: Object,
			default: () => ({}),
		},
	})
</script>

<template>
	<div class="detail-infos">
		<div class="name">{{ topInfos.houseName }}</div>
		<div class="tags">
			<template
				v-for="(item, index) in topInfos.houseTags"
				:key="index">
				<span
					class="item"
					:style="{
						color: item.tagText.color,
						background: item.tagText.background.color,
					}"
					v-if="item.tagText">
					{{ item.tagText.text }}
				</span>
			</template>
		</div>
		<div class="comment">
			<div class="left">
				<div class="score">{{ topInfos.commentBrief.overall }}</div>
				<div class="title">{{ topInfos.commentBrief.scoreTitle }}</div>
				<div class="brief">{{ topInfos.commentBrief.commentBrief }}</div>
			</div>
			<div class="right">
				<div class="count">
					{{ topInfos.commentBrief.totalCount }}条评论
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<div class="location">
			<div class="left">
				{{ topInfos.nearByPosition.address }}
			</div>
			<div class="right">
				地图·周边
				<van-icon name="arrow" />
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.detail-infos {
		padding: 0 16px;
		box-sizing: border-box;
		.name {
			font-size: 20px;
			font-weight: 700;
			line-height: 20px;
			padding: 20px 0 10px 0;
			line-height: 25px;
		}
		.tags {
			.item {
				margin-right: 5px;
			}
		}
		.comment {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 20px;
			padding: 10px;
			margin: 10px 0;
			background-color: #f7f6fb;
			border-radius: 5px;
			overflow: hidden;
			.left {
				display: flex;
				align-items: flex-end;
				// padding: 10px 10px;
				.score {
					font-size: 20px;
					line-height: 18px;
					font-weight: 700;
					margin-right: 5px;
					vertical-align: bottom;
				}
				.title {
					font-size: 14px;
					line-height: 14px;
					font-weight: 700;
					margin-right: 5px;
				}
				.brief {
					font-size: 12px;
					line-height: 12px;
					color: #545657;
				}
			}
			.right {
				color: #f7a381;
			}
		}
		.location {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 20px;
			padding: 10px;
			margin: 10px 0;
			background-color: #f7f6fb;
			border-radius: 5px;
			overflow: hidden;
			.left {
				font-weight: 700;
			}
			.right {
				color: #f7a381;
			}
		}
	}
</style>
